<template>
  <div class="medical-record-detail">
    <van-nav-bar
      title="就诊详情"
      left-arrow
      @click-left="router.back()"
    />

    <div class="content-wrapper">
      <!-- 基本信息 -->
      <van-cell-group inset class="info-group">
        <van-cell title="就诊科室" :value="record.departmentName" />
        <van-cell title="就诊医生" :value="record.doctorName" />
        <van-cell title="就诊时间" :value="formatDateTime(record.visitTime)" />
        <van-cell title="病历编号" :value="record.recordNo" />
        <van-cell title="状态">
          <template #value>
            <van-tag :type="getStatusType(record.status)">
              {{ getStatusText(record.status) }}
            </van-tag>
          </template>
        </van-cell>
      </van-cell-group>

      <!-- 诊断信息 -->
      <van-cell-group inset class="info-group" v-if="record.diagnosis">
        <van-cell title="诊断结果" :label="record.diagnosis" />
        <van-cell title="治疗方案" :label="record.treatment" v-if="record.treatment" />
        <van-cell title="医嘱" :label="record.medicalAdvice" v-if="record.medicalAdvice" />
      </van-cell-group>

      <!-- 住院信息 -->
      <template v-if="record.needHospitalization">
        <div class="section-title">住院信息</div>
        <van-cell-group inset class="info-group" v-if="hospitalizationInfo">
          <van-cell title="病房信息" :value="hospitalizationInfo.wardName + ' - ' + hospitalizationInfo.bedNumber + '号床'" />
          <van-cell title="住院状态">
            <template #value>
              <van-tag :type="getHospitalizationStatusType(hospitalizationInfo.status)">
                {{ getHospitalizationStatusText(hospitalizationInfo.status) }}
              </van-tag>
            </template>
          </van-cell>
          <van-cell title="入院时间" :value="formatDateTime(hospitalizationInfo.admissionTime)" v-if="hospitalizationInfo.admissionTime" />
          <van-cell title="预计出院时间" :value="formatDateTime(hospitalizationInfo.estimatedDischargeTime)" v-if="hospitalizationInfo.estimatedDischargeTime" />
          <van-cell title="实际出院时间" :value="formatDateTime(hospitalizationInfo.actualDischargeTime)" v-if="hospitalizationInfo.actualDischargeTime" />
        </van-cell-group>
        <van-empty v-else description="暂无住院信息" />
      </template>

      <!-- 药方信息 -->
      <template v-if="prescriptions.length > 0">
        <div class="section-title">处方信息</div>
        <van-cell-group inset v-for="prescription in prescriptions" :key="prescription.id" class="info-group">
          <van-cell :title="'处方编号：' + prescription.prescriptionNo">
            <template #value>
              <van-tag :type="getPrescriptionStatusType(prescription.status)">
                {{ getPrescriptionStatusText(prescription.status) }}
              </van-tag>
            </template>
          </van-cell>
          <van-cell title="开具时间" :value="formatDateTime(prescription.prescribeTime)" />
          <van-cell title="处方类型" :value="getPrescriptionTypeText(prescription.type)" />
          <van-cell title="总金额" :value="'￥' + prescription.totalAmount" v-if="prescription.totalAmount" />
          
          <!-- 药品明细 -->
          <template v-if="prescription.prescriptionDetails && prescription.prescriptionDetails.length > 0">
            <van-cell title="药品明细" />
            <div class="medicine-list">
              <div v-for="detail in prescription.prescriptionDetails" :key="detail.id" class="medicine-item">
                <div class="medicine-name">
                  {{ detail.medicineName }}
                  <span class="medicine-spec" v-if="detail.specification">
                    ({{ detail.specification }})
                  </span>
                </div>
                <div class="medicine-info">
                  <span>{{ detail.quantity }}{{ detail.unit }}</span>
                  <span class="divider">|</span>
                  <span>{{ detail.usage }}</span>
                  <span class="divider">|</span>
                  <span>{{ detail.frequency }}</span>
                  <span class="divider">|</span>
                  <span>{{ detail.days }}天</span>
                </div>
                <div class="medicine-amount" v-if="detail.amount">
                  ￥{{ detail.amount }}
                </div>
              </div>
            </div>
          </template>
        </van-cell-group>
      </template>
      <van-empty v-else description="暂无处方信息" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'
import { getMedicalRecordDetail } from '../api'

const route = useRoute()
const router = useRouter()
const record = ref({})
const hospitalizationInfo = ref(null)
const prescriptions = ref([])

// 获取就诊记录详情
const loadMedicalRecordDetail = async () => {
  try {
    const res = await getMedicalRecordDetail(route.params.id)
    if (res.code === 200) {
      record.value = res.data.record
      hospitalizationInfo.value = res.data.hospitalizationInfo
      prescriptions.value = res.data.prescriptions || []
    } else {
      showToast(res.message || '获取就诊记录失败')
    }
  } catch (error) {
    console.error('获取就诊记录失败：', error)
    showToast('获取就诊记录失败')
  }
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return ''
  const date = new Date(dateTime)
  return date.toLocaleString()
}

// 获取就诊状态标签类型
const getStatusType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'success',
    2: 'danger'
  }
  return typeMap[status] || 'default'
}

// 获取就诊状态文本
const getStatusText = (status) => {
  const textMap = {
    0: '待就诊',
    1: '已完成',
    2: '已取消'
  }
  return textMap[status] || '未知'
}

// 获取住院状态标签类型
const getHospitalizationStatusType = (status) => {
  const typeMap = {
    0: 'default',
    1: 'primary',
    2: 'success'
  }
  return typeMap[status] || 'default'
}

// 获取住院状态文本
const getHospitalizationStatusText = (status) => {
  const textMap = {
    0: '未住院',
    1: '住院中',
    2: '已出院'
  }
  return textMap[status] || '未知'
}

// 获取处方状态标签类型
const getPrescriptionStatusType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'primary',
    2: 'success',
    3: 'success',
    4: 'danger'
  }
  return typeMap[status] || 'default'
}

// 获取处方状态文本
const getPrescriptionStatusText = (status) => {
  const textMap = {
    0: '待审核',
    1: '已审核',
    2: '已配药',
    3: '已完成',
    4: '已取消'
  }
  return textMap[status] || '未知'
}

// 获取处方类型文本
const getPrescriptionTypeText = (type) => {
  const textMap = {
    1: '西药',
    2: '中药',
    3: '检查',
    4: '治疗'
  }
  return textMap[type] || '未知'
}

onMounted(() => {
  loadMedicalRecordDetail()
})
</script>

<style lang="scss" scoped>
.medical-record-detail {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.content-wrapper {
  padding: 12px;
}

.info-group {
  margin-bottom: 12px;
  background-color: #fff;
  border-radius: 8px;
}

.section-title {
  margin: 16px 0 8px;
  padding-left: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #323233;
}

.medicine-list {
  padding: 8px 16px;
}

.medicine-item {
  padding: 12px 0;
  border-bottom: 1px solid #ebedf0;

  &:last-child {
    border-bottom: none;
  }
}

.medicine-name {
  font-size: 14px;
  color: #323233;
  margin-bottom: 8px;

  .medicine-spec {
    font-size: 12px;
    color: #969799;
  }
}

.medicine-info {
  font-size: 12px;
  color: #646566;
  margin-bottom: 4px;

  .divider {
    margin: 0 8px;
    color: #ebedf0;
  }
}

.medicine-amount {
  font-size: 14px;
  color: #ee0a24;
  text-align: right;
}
</style>